import "./style.css";
import WHY from "./lib/index.js";

document.querySelector("#app").innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button">地图选点</button>
      <button id="ssoLogin" type="button">登录授权</button>
      <button id="getMapCenter" type="button">获取地图中心点坐标</button>
      <form onsubmit="return false" id="form"><input type="search" name="q" id="search" placeholder="搜索"/></form>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
    <div id="map" style="width: 640px; height: 320px;"></div>
  </div>
`;

console.log(WHY().useImage(233));
// 初始化地图对象
var map = new T.Map("map", {
  projection: "EPSG:4326",
});
// IP定位
// IP定位
fetch("https://location.tianditu.gov.cn/data/getCityName?callback=query")
  .then((r) => r.json())
  .then((res) => {
    let { lng, lat } = res.data;
    map.centerAndZoom(new T.LngLat(lng, lat), 18);
    console.log("location", res.data);
    //
    initLocalSearch();
  });
fetch("https://ping.youloga.com")
  .then((r) => r.json())
  .then((res) => {
    console.log("ping", res);
  });

var lc = new T.LocalCity();
var lcr = new T.LocalCityResult();
var lo = new T.Geolocation();
// 创建本地搜索
var localsearch = null;
function initLocalSearch() {
  localsearch = new T.LocalSearch(map, {
    pageCapacity: 10,
    onSearchComplete: function (e) {
      console.log(e);
    },
  });
  console.log("localsearch", localsearch);
}
var input = document.querySelector("#search");

document.querySelector("#form").addEventListener("submit", (e) => {
  e.preventDefault();
  localsearch.search(input.value);
  console.log("form submit", input.value);
});
// 表单监听
function searchSubmit(e) {
  e.preventDefault();
  // var search = document.getElementById("search").value;
  // localsearch.search(search);
}
console.log(lcr);
lc.location(function (e) {
  console.log("LocalCity", e);
});
lo.getCurrentPosition(function (e) {
  console.log("Geolocation", e);
});
// lc.getCurrentPosition(function (e) {
//   console.log(e);
// });

// lc.location(function (e) {
//   console.log(e);
//   // var marker = new T.Marker(e.lnglat);
//   // map.addOverLay(marker);
// });
// http://ping.youloga.com/
//添加比例尺控件
var scale = new T.Control.Scale();
map.addControl(scale);
console.dir(T);
// 获取当前位置
// navigator.geolocation.getCurrentPosition(function (position) {
//   let { latitude, longitude } = position.coords;
//   var lnglat = new T.LngLat(longitude, latitude); // 设置中心点坐标
//   map.centerAndZoom(lnglat, 18); // 设置地图显示级别
//   console.log("coords", position.coords);
// });
// 获取地图中心点坐标 getMapCenter
document.querySelector("#getMapCenter").onclick = () => {
  console.log("getCenter", map.getCenter());
};
//
document.querySelector("#ssoLogin").onclick = () => {
  WHY()
    .ssoLogin({
      coord: "32.065288,118.77023",
    })
    .then((res) => {
      console.log("ssoLogin", res);
    })
    .catch();
};

document.querySelector("#counter").onclick = () => {
  WHY({ key: "JZEBZ-JGIK5-TJYIG-IIACC-XNFI5-SIBSZ" })
    .mapPicker({
      coord: "32.065288,118.77023",
    })
    .then((res) => {
      console.log("mapPicker", res);
    })
    .catch();
};
